'use client';

import type {
  IConfigPhone,
  IConfigPhoneAliyunItem,
  IConfigPhoneTencentItem,
} from '@/interfaces';
import classNames from 'classnames';

export default function QueryConfigPhone({
  details,
}: {
  details: IConfigPhone;
}) {
  const login = details.list.LOGIN;
  const register = details.list.REGISTER;

  return (
    <div className="row">
      <div className="col">
        <div className="vstack gap-4">
          <div
            className={classNames('text-center', {
              'text-primary': login?.service === 'TENCENT',
            })}
          >
            登录 - 腾讯云
          </div>
          <div className="row">
            <div className="col">
              <PhoneItem type="TENCENT" item={login?.tencent} />
            </div>
          </div>

          <div
            className={classNames('text-center', {
              'text-primary': login?.service === 'ALIYUN',
            })}
          >
            登录 - 阿里云
          </div>
          <div className="row">
            <div className="col">
              <PhoneItem type="ALIYUN" item={login?.aliyun} />
            </div>
          </div>

          <div
            className={classNames('text-center', {
              'text-primary': register?.service === 'TENCENT',
            })}
          >
            注册 - 腾讯云
          </div>
          <div className="row">
            <div className="col">
              <PhoneItem type="TENCENT" item={register?.tencent} />
            </div>
          </div>

          <div
            className={classNames('text-center', {
              'text-primary': register?.service === 'ALIYUN',
            })}
          >
            注册 - 阿里云
          </div>
          <div className="row">
            <div className="col">
              <PhoneItem type="ALIYUN" item={register?.aliyun} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const PhoneItem = ({
  type,
  item,
}: {
  type: 'TENCENT' | 'ALIYUN';
  item?: IConfigPhoneAliyunItem | IConfigPhoneTencentItem;
}) => {
  if (item) {
    return (
      <>
        <dl className="row row-cols-4">
          <dt
            className={classNames('col my-2 text-end fw-normal', {
              'text-success': item.enable,
              'text-secondary': !item.enable,
            })}
          >
            是否启用
          </dt>
          <dd className="col my-2 text-start">{item.enable + ''}</dd>

          <dt className="col my-2 text-end fw-normal">有效期</dt>
          <dd className="col my-2 text-start">{item.expire}</dd>

          <dt className="col my-2 text-end fw-normal">有效次数</dt>
          <dd className="col my-2 text-start">{item.total}</dd>

          <dt className="col my-2 text-end fw-normal">间隔时间</dt>
          <dd className="col my-2 text-start">{item.interval}</dd>

          <dt className="col my-2 text-end fw-normal">次数恢复时间</dt>
          <dd className="col my-2 text-start">{item.recoveryTime}</dd>

          <dt className="col my-2 text-end fw-normal">长度</dt>
          <dd className="col my-2 text-start">{item.length}</dd>

          <dt className="col my-2 text-end fw-normal">字母数字</dt>
          <dd className="col my-2 text-start">{item.alphanumeric + ''}</dd>

          <dt className="col my-2 text-end fw-normal">字母</dt>
          <dd className="col my-2 text-start">{item.alphabetic + ''}</dd>

          <dt className="col my-2 text-end fw-normal">Ascii</dt>
          <dd className="col my-2 text-start">{item.ascii + ''}</dd>

          <dt className="col my-2 text-end fw-normal">数字</dt>
          <dd className="col my-2 text-start">{item.numeric + ''}</dd>
        </dl>
        {type === 'TENCENT' && (
          <dl className="row row-cols-4">
            <dt className="col my-2 text-end fw-normal">SecretId</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneTencentItem).secretId}
            </dd>

            <dt className="col my-2 text-end fw-normal">SecretKey</dt>
            <dd className="col my-2 text-start">*********</dd>

            <dt className="col my-2 text-end fw-normal">Action</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneTencentItem).action}
            </dd>

            <dt className="col my-2 text-end fw-normal">Version</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneTencentItem).version}
            </dd>

            <dt className="col my-2 text-end fw-normal">Endpoint</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneTencentItem).endpoint}
            </dd>

            <dt className="col my-2 text-end fw-normal">服务地域</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneTencentItem).region}
            </dd>

            <dt className="col my-2 text-end fw-normal">下发手机号码</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneTencentItem).phoneNumberSet.join(', ')}
            </dd>

            <dt className="col my-2 text-end fw-normal">短信 SdkAppId</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneTencentItem).smsSdkAppId}
            </dd>

            <dt className="col my-2 text-end fw-normal">模板 Id</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneTencentItem).templateId}
            </dd>

            <dt className="col my-2 text-end fw-normal">短信签名</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneTencentItem).signName}
            </dd>

            <dt className="col my-2 text-end fw-normal">模板参数</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneTencentItem).templateParamSet.join(', ')}
            </dd>

            <dt className="col my-2 text-end fw-normal">短信码号扩展号</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneTencentItem).extendCode}
            </dd>

            <dt className="col my-2 text-end fw-normal">上下文信息</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneTencentItem).sessionContext}
            </dd>

            <dt className="col my-2 text-end fw-normal">SenderId</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneTencentItem).senderId}
            </dd>
          </dl>
        )}
        {type === 'ALIYUN' && (
          <dl className="row row-cols-4">
            <dt className="col my-2 text-end fw-normal">AccessKeyId</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneAliyunItem).accessKeyId}
            </dd>

            <dt className="col my-2 text-end fw-normal">AccessKeySecret</dt>
            <dd className="col my-2 text-start">*********</dd>

            <dt className="col my-2 text-end fw-normal">服务地域</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneAliyunItem).endpoint}
            </dd>

            <dt className="col my-2 text-end fw-normal">接收短信的手机号码</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneAliyunItem).phoneNumbers}
            </dd>

            <dt className="col my-2 text-end fw-normal">短信签名</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneAliyunItem).signName}
            </dd>

            <dt className="col my-2 text-end fw-normal">短信模板 Id</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneAliyunItem).templateCode}
            </dd>

            <dt className="col my-2 text-end fw-normal">上行短信扩展码</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneAliyunItem).smsUpExtendCode}
            </dd>

            <dt className="col my-2 text-end fw-normal">外部流水扩展字段</dt>
            <dd className="col my-2 text-start">
              {(item as IConfigPhoneAliyunItem).outId}
            </dd>
          </dl>
        )}
      </>
    );
  }

  return <div className="text-center my-4 text-muted">暂无配置</div>;
};
